<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Menus and toolbars</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Winforms, Mono, Visual Basic, menus, toolbars, programming, tutorial">
<meta name="description" content="Menus and toolbars">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href=".." title="Home">Contents</a>


<h1>Menus and toolbars</h1>


<p>
In this part of the Visual Basic Winforms tutorial, we will talk 
about menus and toolbars. 
</p>

<div class="center">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* top_horizontal */
google_ad_slot = "3327173442";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<p>
A menubar is one of the most visible parts of the GUI application. 
It is a group of commands located in various menus. While in console applications 
you had to remember all those arcane commands, here we have most of the commands 
grouped into logical parts. There are accepted standards that further reduce 
the amount of time spending to learn a new application. 
</p>


<h2>Simple menu</h2>

<p>
In the first example, we create a simple menu. 
</p>


<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows a simple
' menu. It has one action, which
' will terminate the program, when
' selected. 
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Public Sub New

       Me.Text = "Simple menu"
       Me.Size = New Size(220, 170)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
   
        Dim ms As New MenuStrip
        ms.Parent = Me
        
        Dim fileItem As New ToolStripMenuItem("&amp;File")    
        Dim exitItem As New ToolStripMenuItem("&amp;Exit", Nothing, _
            New EventHandler(AddressOf OnExit))
        
        exitItem.ShortcutKeys = Keys.Control Or Keys.X
        fileItem.DropDownItems.Add(exitItem)

        ms.Items.Add(fileItem)
        MainMenuStrip = ms
        
    End Sub

    Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
        Me.Close
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class 
</pre>

<p>
In our example, we have a menubar and one menu. 
Inside a menu there is one menu item. If we select the menu item, 
application is closed. 
</p>

<p>
Notice the ways how we can close the application. We can close it by using 
the Ctrl+X shorcut or by pressing Alt, F, E keys. 
</p>

<pre class="explanation">
 Dim ms As New MenuStrip
</pre>

<p>
<b class="keyword">MenuStrip</b> creates a menu system for our form. 
We add <b class="keyword">ToolStripMenuItem</b> objects to the MenuStrip
that represent the individual menu commands in the menu structure.
Each <b class="keyword">ToolStripMenuItem</b> can be a command for your 
application or a parent menu for other submenu items.
</p>

<pre class="explanation">
 Dim fileItem As New ToolStripMenuItem("&amp;File")         
</pre>

<p>
Here we create a file menu.
</p>

<pre class="explanation">
 Dim exitItem As New ToolStripMenuItem("&amp;Exit", Nothing, _
     New EventHandler(AddressOf OnExit)) 
</pre>

<p>
This line creates the exit menu item.
</p>

<pre class="explanation">
 exitItem.ShortcutKeys = Keys.Control Or Keys.X
</pre>

<p>
We provide a shortcut for the exit menu item.
</p>

<pre class="explanation">
 fileItem.DropDownItems.Add(exitItem)
</pre>

<p>
The exit menu item is added to the drop down items of the menu object. 
</p>

<pre class="explanation">
 ms.Items.Add(fileItem)          
</pre>

<p>
Here we add the menu object into the menu strip. 
</p>

<pre class="explanation">
 MainMenuStrip = ms
</pre>

<p>
The <b class="keyword">MenuStrip</b> is plugged into the form. 
</p>


<br>
<img src="/img/gui/vbwinf/simplemenu.png" alt="Simple menu">
<div class="figure">Figure: Simple menu</div>


<h2>Submenu</h2>

<p>
Each menu item can also have a submenu. This way we can group similar commnads into groups.
For example we can place commands that hide/show various toolbars like personal bar, 
address bar, status bar or navigation bar into a submenu called toolbars.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a submenu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Public Sub New

       Me.Text = "Submenu"
       Me.Size = New Size(380, 220)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
   
        Dim ms As New MenuStrip
        ms.Parent = Me
        
        Dim fileItem As New ToolStripMenuItem("&amp;File")    
        Dim exitItem As New ToolStripMenuItem("&amp;Exit", Nothing, _
            New EventHandler(AddressOf OnExit))
        
        exitItem.ShortcutKeys = Keys.Control Or Keys.X
        
        Dim import As New ToolStripMenuItem
        import.Text = "Import"

        Dim temp As New ToolStripMenuItem
        temp.Text = "Import newsfeed list..."
        import.DropDownItems.Add(temp)

        temp = New ToolStripMenuItem
        temp.Text = "Import bookmarks..."
        import.DropDownItems.Add(temp)

        temp = New ToolStripMenuItem
        temp.Text = "Import mail..."
        
        import.DropDownItems.Add(temp)
        fileItem.DropDownItems.Add(import)
        fileItem.DropDownItems.Add(exitItem)

        ms.Items.Add(fileItem)
        Me.MainMenuStrip = ms
        
    End Sub

    Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
        Me.Close
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
In this example, we create one submenu. The submenu Import has three menu items. 
</p>

<pre class="explanation">
 Dim import As New ToolStripMenuItem
 import.Text = "Import"
</pre>

<p>
A <b class="keyword">ToolStripMenuItem</b> can be a menu or a menu item. 
Here it will act as a submenu.
</p>

<pre class="explanation">
 Dim temp As New ToolStripMenuItem
 temp.Text = "Import newsfeed list..."
 import.DropDownItems.Add(temp)
</pre>

<p>
Here we create a menu item and add it to the Import submenu.
</p>


<br>
<img src="/img/gui/vbwinf/submenu.png" alt="Submenu">
<div class="figure">Figure: Submenu</div>


<h2>Check menu item</h2>

<p>
The next code example demonstrates, how to create a checked menu item. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a checked
' menu
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Dim sb As Statusbar

    Public Sub New

       Me.Text = "Check menu item"
       Me.Size = New Size(380, 220)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
   
        sb = New StatusBar
        sb.Parent = Me
        sb.Text = "Ready"

        Dim mainMenu As New MainMenu

        Dim file As MenuItem = mainMenu.MenuItems.Add("&amp;File")
        file.MenuItems.Add(New MenuItem("E&amp;xit", _
            New EventHandler(AddressOf OnExit), Shortcut.CtrlX))

        Dim view As MenuItem = mainMenu.MenuItems.Add("&amp;View")
        Dim viewStatusBar As New MenuItem("View StatusBar")
        viewStatusBar.Checked = True
        view.MenuItems.Add(viewStatusBar)

        Me.Menu = mainMenu
        
        AddHandler viewStatusBar.Click, AddressOf Me.ToggleStatusBar

        
    End Sub
    
    Private Sub ToggleStatusBar(ByVal sender As Object, ByVal e As EventArgs) 
    
        Dim check As Boolean = sender.Checked
        
        If check 
            sb.Visible = False
            sender.Checked = False
        Else 
            sb.Visible = True
            sender.Checked = True
        End If
        
    End Sub


    Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
        Me.Close
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
We have two menus. File and View. The View menu has a menu item 
that toggles the visibility of
the statusbar. 
</p>

<pre class="explanation">
 Dim mainMenu As New MainMenu
</pre>

<p>
In this example, we use the <b class="keyword">MainMenu</b> control. 
To create a menubar, we can use either
<b class="keyword">MainMenu</b> or <b class="keyword">MenuStrip</b> 
controls. The latter has some additional 
functionality.
</p>

<pre class="explanation">
 viewStatusBar.Checked = True
</pre>

<p>
This menu item is checked by default, because the statusbar is visible 
from the start of the application.
</p>

<pre class="explanation">
 Dim check As Boolean = sender.Checked
  
 If check 
     sb.Visible = False
     sender.Checked = False
 Else 
     sb.Visible = True
     sender.Checked = True
 End If
</pre>

<p>
We determine, if the menu item is checked. We show and hide the statusbar 
and the check tick depending on 
the <b class="keyword">check</b> value. 
</p>

<br>
<img src="/img/gui/vbwinf/checkmenuitem.png" alt="Check menu item">
<div class="figure">Figure: Check menu item</div>


<h2>Images, separator</h2>

<p>
We will further enhance our knowledge of the <b class="keyword">MenuStrip</b> control. 
We will create a menu item with an image and show how to separate them with a separator. 
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program shows how to add images and
' separators to menu items
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Public Sub New

       Me.Text = "MenuStrip"
       Me.Size = New Size(250, 200)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
   
        Dim menuStrip As New MenuStrip
    
        Dim titem1 As New ToolStripMenuItem("File")
        menuStrip.Items.Add(titem1)
    
        Dim titem2 As New ToolStripMenuItem("Tools")
        menuStrip.Items.Add(titem2)
    
        Dim subm1 As New ToolStripMenuItem("New")  
        subm1.Image = Image.FromFile("new.png")
        titem1.DropDownItems.Add(subm1)
    
        Dim subm2 As New ToolStripMenuItem("Open") 
        subm2.Image = Image.FromFile("open.png")
        titem1.DropDownItems.Add(subm2)
    
        titem1.DropDownItems.Add(New ToolStripSeparator)

        Dim subm3 As New ToolStripMenuItem("Exit")
        subm3.Image = Image.FromFile("exit.png")
        titem1.DropDownItems.Add(subm3)
    
        AddHandler subm3.Click, AddressOf Me.OnExit
        
        Controls.Add(menuStrip)
    
        MainMenuStrip = menuStrip
        
    End Sub

    Private Sub OnExit(ByVal sender As Object, ByVal e As EventArgs)
        Me.Close
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
We have two menus in our code example. File and Tools. In the File we have three 
menu items with images. We have also one separator.
In this example, the png images must be located in the current working directory.
</p>


<pre class="explanation">
 Dim subm1 As New ToolStripMenuItem("New")  
 subm1.Image = Image.FromFile("new.png")
 titem1.DropDownItems.Add(subm1)
</pre>

<p>
Here we create the first menu item. To add an image to the item, we set the 
<b class="keyword">Image</b> property to our image.
We create an Image from the specified file using the static 
<b class="keyword">FromFile</b> method. 
</p>


<pre class="explanation">
 titem1.DropDownItems.Add(New ToolStripSeparator)
</pre>

<p>
Here we add a separator to the File menu. 
</p>


<br>
<img src="/img/gui/vbwinf/images.png" alt="MenuStrip">
<div class="figure">Figure: Images and separator</div>


<h2>ToolBar</h2>

<p>
Menus group all commands that we can use in an application. Toolbars 
provide a quick access to 
the most frequently used commands. <b class="keyword">ToolBar</b> 
control is used to display 
<b class="keyword">ToolBarButton</b> controls. We can assign images 
to the buttons by creating 
an <b class="keyword">ImageList</b>. We than assign the image list 
to the <b class="keyword">ImageList</b>
property of the toolbar and assign the image index value to the 
<b class="keyword">ImageIndex</b> property
for each <b class="keyword">ToolBarButton</b>.
</p>

<pre class="code">
' ZetCode Mono Visual Basic Winforms tutorial
'
' This program creates a toolbar
'
' author jan bodnar
' last modified May 2009
' website www.zetcode.com

Imports System.Windows.Forms
Imports System.Drawing


Public Class WinVBApp
    Inherits Form

    Dim sb As Statusbar

    Public Sub New

       Me.Text = "Toolbar"
       Me.Size = New Size(250, 220)
       
       Me.InitUI
       
       Me.CenterToScreen

    End Sub
    
    Private Sub InitUI
   
        Dim toolBar As New ToolBar
        toolBar.Parent = Me
        Dim toolBarIcons As New ImageList
        Dim saveb As New ToolBarButton
        Dim exitb As New ToolBarButton

        saveb.ImageIndex = 0
        saveb.Tag = "Save"
        exitb.ImageIndex = 1
        exitb.Tag = "Exit"
        
        toolBar.ImageList = toolBarIcons
        toolBar.ShowToolTips = True
        toolBar.Buttons.AddRange(New ToolBarButton() {saveb, exitb})
        
        toolBarIcons.Images.Add(New Icon("new.ico"))
        toolBarIcons.Images.Add(New Icon("exit.ico"))
        
        AddHandler toolBar.ButtonClick, AddressOf Me.OnClicked

    End Sub
    

    Private Sub OnClicked(ByVal sender As Object, _
        ByVal e As ToolBarButtonClickEventArgs)

        If e.Button.Tag.Equals("Exit")
            Me.Close
        End If
    End Sub


    Public Shared Sub Main
        Application.Run(New WinVBApp)
    End Sub
   
End Class
</pre>

<p>
In our example, we show two buttons on the toolbar. 
</p>

<pre class="explanation">
 Dim toolBar As New ToolBar
</pre>

<p>
 Here we create the <b class="keyword">ToolBar</b> control. 
</p>

<pre class="explanation">
 toolBar.ImageList = toolBarIcons
</pre>

<p>
An image list is created. 
</p>

<pre class="explanation">
 Dim saveb As New ToolBarButton
 Dim exitb As New ToolBarButton
</pre>

<p>
These are two toolbar buttons. 
</p>

<pre class="explanation">
saveb.ImageIndex = 0
</pre>

<p>
We determine which icon from the image list will be used for the save toolbar button. 
</p>

<pre class="explanation">
 toolBar.Buttons.AddRange(New ToolBarButton() {saveb, exitb})
</pre>

<p>
The <b class="keyword">ToolBarButton</b> controls are added to the toolbar. 
</p>

<pre class="explanation">
 toolBarIcons.Images.Add(New Icon("new.ico"))
 toolBarIcons.Images.Add(New Icon("exit.ico"))
</pre>

<p>
Icons are added to the image list.
</p>

<pre class="explanation">
 If e.Button.Tag.Equals("Exit")
     Me.Close
 End If
</pre>

<p>
If the tag of the button equals to "Exit", we close the application. 
</p>

<br>
<img src="/img/gui/vbwinf/toolbar.png" alt="ToolBar">
<div class="figure">Figure: ToolBar</div>

<hr class="btm">

<p>
This part of the Visual Basic Winforms tutorial was about menus and toolbars. 
</p>

<br>
<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div> 
<br>

<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>

<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified June 2, 2009  <span class="copyright">&copy; 2007 - 2012 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>

